---
type: tutorial
unitTitle: 通过可复用的页面布局节省时间和精力
title: '第四单元：布局'
description: >-
  教程：搭建你的 Astro 博客 -
  使用 Astro 布局在你的页面和文章之间共享常见元素和样式。
---
import Badge from '~/components/Badge.astro';
import Box from '~/components/tutorial/Box.astro';
import Checklist from '~/components/Checklist.astro';

现在你已经可以使用组件进行搭建，是时候创建一些自定义布局吧！

## 接下来

在这个单元中，你将构建布局，以在你的页面和博客文章之间共享常见元素和样式。

为了实现这一目标，你将
- 创建可复用的布局组件
- 使用 `<slot />` 将内容传递给你的布局
- 将 Markdown frontmatter 中的数据传递给你的布局
- 嵌套多个布局

<Box icon="check-list">

## 任务清单

<Checklist>
- [ ] 我已经准备好通过布局将我的页面设计提升到一个新的水平！
</Checklist>
</Box>
